<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>yuque编辑器</title>
    <style>
      .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
      }

      .item {
        flex-shrink: 0;
      }

      .item-1 {
        white-space: nowrap;
        flex-grow: 0;
        min-width: 0;
        max-width: calc(100% - 230px);
        overflow: auto;
      }
      /* 隐藏滚动条 */
      /* .item-1::-webkit-scrollbar {
        display: none;
      } */

      .item-2 {
        width: 150px;
      }

      .item-3 {
        margin-left: auto;
      }

      .sss {
        display: inline-flex;
        padding: 0 8px;
        height: 30px;
        line-height: 30px;
        background-color: #f0f;
        margin: 0 10px;
      }
    </style>
    <script>
      // 获取 item-1 元素
      // const item1 = document.querySelector('.item-1');

      // // 监听 item-1 子元素的变化
      // const observer = new MutationObserver((mutations) => {
      //   mutations.forEach((mutation) => {
      //     if (mutation.type === 'childList') {
      //       // 如果子元素数量增加，允许 item-1 扩展并滚动
      //       if (item1.children.length > 1) {
      //         item1.style.flexGrow = '1';
      //         item1.style.overflow = 'auto';
      //       } else {
      //         // 如果只有一个子元素，收缩 item-1 到最小宽度
      //         item1.style.flexGrow = '0';
      //         item1.style.overflow = 'hidden';
      //       }
      //     }
      //   });
      // });

      // // 开始观察 item-1 元素的子元素变化
      // observer.observe(item1, { childList: true });
    </script>
  </head>
  <body>
    <div class="container">
      <div class="item item-1">
        <span class="sss">我们都是好孩子，可以有一个好的将来</span>
        <span class="sss">我们都是好孩子，可以有一个好的将来</span>
        <span class="sss">我们都是好孩子，可以有一个好的将来</span>
      </div>
      <div class="item item-2" style="cursor: pointer" onClick="scrollMove()">
        固定宽度元素
      </div>
      <div class="item item-3">第三个元素</div>
    </div>

    <script>
      function scrollMove() {
        const item1 = document.querySelector('.item-1');
        console.log(item1);
        item1.scrollBy({
          // left: -120,// 向左滚动
          left: 120, // 向右滚动
          behavior: 'smooth',
        });
      }
    </script>
  </body>
</html>
